<template>
  <div class="main">
    <div class="header">
        <p class="type">{{product.product.title}}</p>
        <img v-if="hasDel" :src="deleteIcon" class="delete" @click="handleDel" alt>
      </div>
      <div class="ticket-info">
        <div>
          <img :src="product.product.litpic" class="thumbnail" alt srcset>
        </div>
        <div class="water-info">
          <p class="name">{{product.product.title}}</p>
          <p class="num" :class="{m10: !hasPrice }">数量： {{product.number}}</p>
          <p v-if="hasPrice" class="price">￥{{product.product.price}}</p>
        </div>
      </div>
  </div>
</template>

<script>
import deleteIcon from "../../assets/common/delete.png";
import api from "../../api";
export default {
  props: ["product", "hasDel", "hasPrice", "type"],
  data() {
    return {
      deleteIcon
    };
  },
  computed: {},
  methods: {
    handleDel() {
      if (this.product.piao_status) {
        let that = this;
      this.$dialog
        .confirm({
          title: `提示`,
          message: "确定删除当前记录吗？"
        })
        .then(() => {
          api.usercenter.delBuyRecordTicket(this.product.order_sn, res => {
            this.$toast.success({
              message: `删除成功`,
              duration: 2000,
              onClose() {
                that.$emit("reload");
              }
            });
          });
        })
        .catch(() => {
          console.log("关闭");
        });
      } else {
        this.$toast('未开票的记录不能删除')
      }
      
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  .header {
    padding: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .type {
      font-size: 4.3vw;
      color: #333;
    }
    .delete {
      width: 7vw;
      height: 7vw;
    }
  }
  .ticket-info {
    display: flex;
    padding: 0 4vw 4vw;
    border-bottom: 1px solid #f9f9f9;
    .thumbnail {
      width: 23vw;
      height: 23vw;
      margin-right: 3vw;
    }
    .water-info {
      margin-left: 5vw;
      .name {
        font-size: 4.2vw;
        margin-bottom: 2vw;
      }
      .num {
        margin-bottom: 2vw;
        color: #999;
      }
      .price {
        font-size: 4.3vw;
        color: #333;
      }
    }
  }
  .m10 {
    margin: 10vw 0;
  }
}
</style>